<script>
export default{
	props:{
		leftTitle:{
			default: '车牌号'
		},
		rightTitle:{
			default: '车牌颜色'
		},
		carNum:{
			type: String,
			default: '浙A',
			required: true		// 必填项
		},
		carColor: {
			type: Number,
			default: 0,
			required: true		// 必填项
		}
	},
	data(){
		return{
			carID: this.carNum,
			strArr: [],			// 弹框中的内容
			colorIndex: this.carColor,		// 选择车牌的颜色索引
			strIndex: 0,		
			showStr:false,		// 选择车牌的弹框
			showDelet: true,	// 删除按钮的显示
			oneStr:'浙京津沪渝冀豫云辽黑湘皖鲁苏赣粤鄂桂甘晋蒙陕吉闽贵青藏川宁新琼',
			numStr:'1234567890',
			engStr:'ABCDEFGHIGKLMNOPQRSTUVWXYZ',
			zhStr:'空警使领学',
		}
	},
	methods:{
		onTxt(item){
			if(this.carID.length < 3){
				if(this.strIndex == 0){
					this.carID = item + this.carID.slice(1);
					this.strIndex = 4;
					this.strArr = [...this.numStr.split(""),...this.engStr.split("")];
				}else if(this.strIndex == 1){
					this.carID = this.carID[0] + item;
					this.strIndex++;
					this.strArr = [...this.numStr.split(""),...this.engStr.split("")];
				}else{
					this.showDelet = true
					this.carID = this.carID + item;
				}
			}else if(this.carID.length >= 3){
				if(this.strIndex == 0){
					this.carID = item + this.carID.slice(1);
					this.strIndex = 4;
					this.strArr = [...this.numStr.split(""),...this.engStr.split("")];
				}else if(this.strIndex == 1){
					this.carID = this.carID[0] + item + this.carID.slice(2);
					this.strIndex++;
					this.strArr = [...this.numStr.split(""),...this.engStr.split("")];
				}else{
					if(this.carID.length <5){
						this.showDelet = true;
						this.carID = this.carID + item;
					}else if(this.carID.length == 5){
						this.strArr = [...this.numStr.split(""),...this.engStr.split(""),...this.zhStr.split("")]
						this.showDelet = true;
						this.carID = this.carID + item;
					}else if(this.carID.length == 6){
						this.showDelet = true;
						this.showStr = false;
						this.carID = this.carID + item;
					}else{
						this.showStr = false;
					}
				}
			}
			
		},
		onCarId(index){
			this.strIndex = index;
			if(index == 0){
				this.showDelet = false;
				this.strArr = this.oneStr.split("");
			}else if(index == 1){
				this.showDelet = false;
				this.strArr = this.engStr.split("");
			}else if(index >=2){
				if(this.carID.length == 2){
					this.showDelet = false;
					this.strArr = this.numStr.split("").concat(this.engStr.split(""));
				}else if(this.carID.length > 2){
					this.showDelet = true;
					if(this.carID.length >= 6){
						this.showDelet = true;
						this.strArr = this.numStr.split("").concat(this.engStr.split(""),this.zhStr.split(""));
					}else{
						this.showDelet = true;
						this.strArr = this.numStr.split("").concat(this.engStr.split(""));
					}
				}
			} 
			this.showStr = true;
		},
		deletCarID(){
			this.carID = this.carID.slice(0, -1);
			if(this.carID.length ==2){
				this.showDelet = false;
			}else if(this.carID.length < 6){
				this.strArr = this.numStr.split("").concat(this.engStr.split(""));
			}
		}, 
	}
}
</script>
<template>
	<view>
		<view class="car-id">
			<view class="left">
				<text class="title">{{leftTitle}}</text>
				<view class="content" :class="'color'+ colorIndex">
					<view class="box bord" >
						<view class="item" @click="onCarId(0)">{{carID[0]}}</view>
						<view class="item" @click="onCarId(1)">{{carID[1]}}</view>
						<view>·</view>
						<view class="item" @click="onCarId(2)">{{carID[2]}}</view>
						<view class="item" @click="onCarId(3)">{{carID[3]}}</view>
						<view class="item" @click="onCarId(4)">{{carID[4]}}</view>
						<view class="item" @click="onCarId(5)">{{carID[5]}}</view>
						<view class="item" @click="onCarId(6)">{{carID[6]}}</view>
					</view>
				</view>
				<view class="showBoxStr" v-show="showStr">
					<view @click="onTxt(item)" class="text" v-for="(item,index) in strArr" :key="index">{{item}}</view>
					<image v-if="showDelet" @click="deletCarID" class="delet" src="../../static/imgs/home/delet.png" mode="heightFix"></image>
				</view>
			</view>
			<view class="right">
				<text class="title">{{rightTitle}}</text>
				<view class="car-color">
					<view class="item lan" @click="colorIndex = 0">{{carID[0]}} <text v-if="colorIndex == 0" class="ceng"><image src="../../static/imgs/home/dui.png" mode="widthFix"></image></text></view>
					<view class="item hui" @click="colorIndex = 3">{{carID[0]}} <text v-if="colorIndex == 3" class="ceng"><image src="../../static/imgs/home/dui.png" mode="widthFix"></image></text></view>
					<view class="item huang" @click="colorIndex = 1">{{carID[0]}} <text v-if="colorIndex == 1" class="ceng"><image src="../../static/imgs/home/dui.png" mode="widthFix"></image></text></view>
					<view class="item bai" @click="colorIndex = 2"><text>其他</text> <text v-if="colorIndex == 2" class="ceng"><image src="../../static/imgs/home/dui.png" mode="widthFix"></image></text></view>
				</view>
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.car-id{
		display: flex;
		flex-direction: row;
		padding: 0 30rpx;
		position: relative;
		.right{
			flex: 1;
			font-size: 28rpx;
			.title{
				display: inline-block;
				text-align: center;
				margin: 15rpx 0 15rpx 10rpx;
				line-height: 36rpx;
			}
			.car-color{
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				.item{
					width: 56rpx;
					height: 56rpx;
					text-align: center;
					line-height: 56rpx;
					box-sizing: border-box;
					margin-bottom: 10rpx;
					color: #FFFFFF;
					position: relative;
					.ceng{
						position: absolute;
						left: 0;
						top: 0;
						background-color: #000;
						// background: url(../../static/imgs/baojing.png) no-repeat;
						// background-size: 40rpx 40rpx;
						// background-position: 8rpx 8rpx;
						width: 100%;
						height: 100%;
						opacity: 0.5;
						image{
							width: 40rpx;
							height: 40rpx;
							margin: 8rpx;
						}
						
					}
				}
				.lan{
					background-color: #4672ff;
				}
				.hui{
					background-color: #f5f5f5;
					border: 1rpx solid #b6b6b6;
					color: #494949;
				}
				.huang{
					background-color: #ffb525;
					border: 1rpx solid #ffa41f;
				}
				.bai{
					background-color: #ffffff;
					border: 1rpx solid #e1e1e1;
					color: #9e9e9e;
					font-size: 24rpx;
				}
			}
		}
		.showBoxStr{
			z-index: 9999;
			position: absolute;
			left: 30rpx;
			top: 190rpx;
			width: calc(100% - 60rpx);
			box-sizing: border-box;
			border: 1rpx solid #007AFF;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			background-color: #FFFFFF;
			.delet{
				width: 12.5%;
				height: 56rpx;
				position: absolute;
				right: 20rpx;
				bottom: 0;
				margin: 10rpx 0;
			}
			.text{
				display: inline-block;
				width: 12.5%;
				height: 56rpx;
				font-size: 36rpx;
				line-height: 56rpx;
				text-align: center;
				margin: 10rpx 0;
			}
		}
		.left{
			display: flex;
			flex-direction: column;
			width: 80%;
			.bord2{
				border: 1rpx solid #92abff;
			}
			.bord3{
				border: 1rpx solid #92abff;
			}
			.color0{
				background-color: #4672ff;
				color: #FFFFFF;
			}
			.color3{
				background-color: #f5f5f5;
				color: #333333;
				border: 1rpx  solid #b7b7b7;
			}
			.color1{
				color: #FFFFFF;
				background-color: #ffb525;
			}
			.color2{
				background-color: #FFFFFF;
				color: #8f8f8f;
				border: 1rpx solid #e1e1e1;
			}
			.content{
				height: 120rpx;
				border-radius: 10rpx;
				margin: 0 20rpx 0 0;
				box-sizing: border-box;
				padding: 10rpx;
				.box{
					.item{
						width: 14%;
						text-align: center;
						position: relative;
					}
					.item::before{
						content: '';
						position: absolute;
						left: 50%;
						bottom: 10rpx;
						transform: translateX(-50%);
						display: inline-block;
						width: 56rpx;
						height: 1rpx;
						background-color: #FFFFFF;
						
					}
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					line-height: 100rpx;
					font-size: 56rpx;
				}
			}
			.title{
				display: inline-block;
				margin: 15rpx 0 15rpx 10rpx;
				font-size: 28rpx;
				line-height: 36rpx;
			}
		}
	
	}
</style>
